<template>
	<view class="">
		<view class="order-de-t">
			<view class="order-de-t-l">
				<view class="order-de-t-l-h">
					<view class="order-de-t-l-h-i">
						<image src="../../static/hospital.png" mode=""></image>
					</view>
					<view class="order-de-t-l-h-t"></view>
					{{order_detail.hospital.name||'暂无数据'}}
				</view>
				<view class="order-de-t-l-t">
					<view class="order-de-t-l-t-i">
						<image src="../../static/pen.png" mode=""></image>
					</view>
					<view class="order-de-t-l-t-t">
						<text>
							工单创建于：{{order_detail.createtime||'暂无数据'}}
						</text>
					</view>
				</view>
			</view>
			<view class="order-de-t-r">
				<view class="op_a" v-if="order_detail.service.surplus>=0">
					剩余：{{order_detail.service.surplus}}次
				</view>
				<view class="op_b" @tap="getMore">
					详情
				</view>
			</view>
		</view>
		<view class="order-de-mo" v-show="isShow">
			<view class="order-de-mo-s">

			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					工单号
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.workID}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					报修时间
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.createtime}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					审核时间
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.warranty.examinetime||'审核中'}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					设备名称
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.equipment.name||"暂无信息"}}
				</view>
			</view>
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					型号
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.equipment.marking||"暂无信息"}}
				</view>
			</view>
		<!-- 	<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					系统编号
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.system_number||'暂无资料'}}
				</view>
			</view> -->
			<view class="order-de-c-c-f">
				<view class="order-de-c-c-f-l">
					软件版本
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.equipment.software_version||'暂无信息'}}
				</view>
			</view>
			<view class="order-de-c-c-f flex-colu">
				<view class="order-de-c-c-f-l" style="margin-bottom: 28rpx;">
					问题描述
				</view>
				<view class="order-de-c-c-f-r">
					{{order_detail.describe}}
				</view>
				<view class="" style="margin: 28rpx 0;">
			    <image :src="item"      @tap="tapPre(index)" 
			 v-for="(item,index) in order_detail.imgs" :key='index'></image>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		props: {
			order_detail: Object,
		},
		data() {
			return {
				isShow: false, //详情显示
			}
		},
		methods: {
			/* 展开详情 */
			getMore() {
				this.isShow = !this.isShow
			},
			tapPre(i){
				console.log(i,159);
				uni.previewImage({
					count:i,
					urls:this.order_detail.imgs
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex-colu {
		z-index: 9999999999999999999999999!important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		image{
			width: 150rpx;
			height: 150rpx;
			display: inline-block;
			margin-right: 10rpx;
			border-radius: 10rpx;
		}
	}
	@keyframes enter {
		from {
			transform: translateY(-308rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	@keyframes leave {
		from {
			transform: translateY(308rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	.ani-enter {

		animation: enter .5s;
	}

	.ani-leave {
		animation: leave .5s;
	}

	.order-de-mo {
		border-top: 16rpx solid #f7f8fb;
		position: relative;

		&-s {
			position: absolute;
			top: -16rpx;
			left: 40rpx;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-top: 20rpx solid $public-oclor;
		}
	}

	.order-de {
		&-c {
			background-color: #f7f8fb;
			border-bottom: 28rpx solid #f7f8fb;

			&-m {
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 33rpx;
				padding: 28rpx 32rpx;

			}

			&-c {
				background-color: #FFFFFF;

				&-f {
					display: flex;
					justify-content: space-between;
					padding: 28rpx 32rpx;
					align-items: center;
					border-bottom: 2rpx solid #f7f8fb;

					&-l {
						font-size: 28rpx;
						font-weight: 500;
						color: #3B3D3D;
					}

					&-r {
						font-size: 24rpx;
						font-weight: 400;
						color: #3B3D3D;
					}
				}
			}
		}


		&-x {
			padding: 0 32rpx;

			&-c {
				&-a {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					margin: 20rpx 0 28rpx;
				}

				&-b {
					font-size: 24rpx;
					font-weight: 400;
					color: #3B3D3D;
					margin-bottom: 32rpx;
				}

				&-c {
					padding-bottom: 42rpx;

					&-i {
						width: 160rpx;
						height: 160rpx;
						background-color: #f5f6f8;
						margin-right: 16rpx;
						display: inline-block;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}


	.order-de-t {
		padding: 52rpx 32rpx 20rpx;
		background-color: $public-oclor;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-l {
			&-h {
				display: flex;
				margin-bottom: 16rpx;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}

			&-t {
				display: flex;
				margin-bottom: 16rpx;
				align-items: center;
				color: rgba(255, 255, 255, 0.6);
				font-size: 20rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}


			}
		}

		&-r {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 32rpx;

		}
	}
	.op_a{
	display: block;
	margin-bottom: 5rpx;
	}
	.op_b{
		text-align: center;
		width: 50rpx;
		display:block;
		border-bottom: 4rpx solid #FFFFFF;
	}
</style>
